<template>
	<view class="uni-wrap">
		<u-sticky bgColor="#fff">
			<u-tabs
				:list="tabList"
				:scrollable="false"
				:activeStyle="{
					fontWeight: 'bold'
				}"
				@click="tabClick">
			</u-tabs>
		</u-sticky>
		
		<view v-if="tabIndex === 0">
			<uni-section title=" ">
				<u--form
				class="from-card"
				labelPosition="left"
				labelWidth="80"
				:model="ruleForm"
				:rules="rules"
				ref="ruleForm">
					<view style="position: relative;" v-for="(expenseDetail,index) in ruleForm.expenseDetailList" :key="index">
						<uni-group :title="'报销明细 '+(index+1)" top="-10">
							<text v-if="ruleForm.expenseDetailList.length>1" class="del-detail" @click="delDetail(index)">删除</text>
							<u-form-item label="报销金额" :prop="`expenseDetailList.${index}.amount`" required>
								<u--input
								v-model="expenseDetail.amount"
								placeholder="请输入"
								inputAlign="right"
								border="none"
								type="digit"
								@change="getSum"
								></u--input>
							</u-form-item>
							<u-form-item label="报销类型" :prop="`expenseDetailList.${index}.type`" required
							@click="pickShow = true;columns = range;pickField = 'type';pickIndex=index">
								<u--input
								disabled
								disabledColor="#ffffff"
								suffixIcon="arrow-right"
								v-model="expenseDetail.type"
								placeholder="请选择"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item label="报销内容" :prop="`expenseDetailList.${index}.detailed`" required>
								<u--textarea
								auto-height
								v-model="expenseDetail.detailed"
								placeholder="请输入内容" >
								</u--textarea>
							</u-form-item>
						</uni-group>
					</view>
				</u--form>
				
				<view @click="addDetail()">
					<uni-title title="＋增加报销明细" color="#027fff" align="center"></uni-title>
				</view>
				
				<uni-group :title="'总报销金额(元):'+amountAll">
					<u--form
					class="from-card"
					labelPosition="top"
					labelWidth="180">
						<u-form-item label="图片">
							<u-upload
								:fileList="imageList"
								@afterRead="afterRead($event,'imageList')"
								@delete="deletePic($event,'imageList')"
								:multiple="true"
								:maxCount="9">
							</u-upload>
						</u-form-item>
					</u--form>
				</uni-group>
			</uni-section>
			
			<!-- 流程组件测试 -->
			<!-- <view>
				<flow-path
				:process="process"
				v-on:deleteuser="deletePers"
				></flow-path>
			</view> -->
			
			<uni-section title="流程" type="line">
				<view style="margin-left: 20rpx;">
					<u--form
					class="from-card"
					labelPosition="top"
					labelWidth="180">
						<u-form-item :label="'审批人('+(userList.length>0?userList.length+'人依次审批':'请选择审批人')+')'">
							<view class="card-plus-t user-t" style="">
								<view class="pers-list">
									<view class="per-list per-all"  v-if="userList.length>showLength"
										@click="gotoPage('/components/choose-user/addMore?type=审批人&chooseUsers='+encodeURIComponent(JSON.stringify(userList)))">
										<view class="pers-pic">
											<u-avatar icon="account" shape="square" size="35" bgColor="#0087FC">
												<u-icon name="account" color="#ffffff" size="50rpx"></u-icon>
											</u-avatar>
										</view>
										<text class="pers-name all-users">查看全部</text>
										<view class="pers-icon">
											<u-icon name="arrow-right" color="#cdcdcd" size="20rpx" bold></u-icon>
										</view>
									</view>
									<view class="per-list" v-for='(it,i) in userList.length>showLength?userList.slice(-showLength):userList' :key='i'>
										<view class="pers-pic">
											<u-avatar
												v-if="it.avatar"
												shape="square"
												size="35"
												:src="it.avatar">
											</u-avatar>
											<u-avatar
												v-else
												:text="it.userName.slice(1)"
												:fontSize="it.userName.length > 2?12:15"
												shape="square"
												size="35"
												bgColor="#0087FC">
											</u-avatar>
											<view class="pers-close" style="" @click="closeUser(i,'userList')">
												<u-icon name="close" color="#ffffff" size="18rpx"
													customStyle="line-height: 20rpx;" bold></u-icon>
											</view>
										</view>
										<view class="image_bottom_text">
											<text class="pers-name">{{it.userName}}</text>
										</view>
										<view class="pers-icon">
											<u-icon name="arrow-right" color="#cdcdcd" size="20rpx" bold></u-icon>
										</view>
									</view>
								</view>
								<view class="card-plus-f plus-style"
									@click="gotoPage('/components/choose-user/choosePer?type='+'审批人&chooseUsers='+encodeURIComponent(JSON.stringify(userList)))">
									<uni-text class="span-style" v-if="userList.length<1">
										<span>*</span>
									</uni-text>
									<u-icon name="plus" color="#a3a3a3" size="22"></u-icon>
								</view>
							</view>
						</u-form-item>
						<u-form-item :label="'抄送人('+(ccList.length>0?'抄送'+ccList.length+'人':'请选择抄送人')+')'">
							<view class="card-plus-t cc-t">
								<view class="per-list per-all"  v-if="ccList.length>showLength"
									@click="gotoPage('/components/choose-user/addMore?type=抄送人&chooseUsers='+encodeURIComponent(JSON.stringify(ccList)))">
									<view class="pers-pic">
										<u-avatar icon="account" shape="square" size="35" bgColor="#0087FC">
											<u-icon name="account" color="#ffffff" size="50rpx"></u-icon>
										</u-avatar>
									</view>
									<text class="pers-name all-users">查看全部</text>
									<view class="pers-icon">
										<u-icon name="plus" color="#cdcdcd" size="20rpx" bold></u-icon>
									</view>
								</view>
								<view class="pers-list">
									<view class="per-list" v-for='(it,i) in ccList.length>showLength?ccList.slice(-showLength):ccList' :key='i'>
										<view class="pers-pic">
											<u-avatar
												v-if="it.avatar"
												shape="square"
												size="35"
												:src="it.avatar">
											</u-avatar>
											<u-avatar
												v-else
												:text="it.userName.slice(1)"
												:fontSize="it.userName.length > 2?12:15"
												shape="square"
												size="35"
												bgColor="#0087FC">
											</u-avatar>
											<view class="pers-close" style="" @click="closeUser(i,'ccList')">
												<u-icon name="close" color="#ffffff" size="18rpx"
													customStyle="line-height: 20rpx;" bold></u-icon>
											</view>
										</view>
										<view class="image_bottom_text">
											<text class="pers-name">{{it.userName}}</text>
										</view>
										<!-- <text class="pers-name">{{it.userName}}</text> -->
										<view class="pers-icon">
											<u-icon name="plus" color="#cdcdcd" size="20rpx" bold></u-icon>
										</view>
									</view> 
								</view>
								<view class="card-plus-s plus-style"
									@click="gotoPage('/components/choose-user/choosePer?type=抄送人&chooseUsers='+encodeURIComponent(JSON.stringify(ccList)))">
									<u-icon name="plus" color="#a3a3a3" size="22"></u-icon>
								</view>
							</view>
						</u-form-item>
					</u--form>
				</view>
			</uni-section>
			
			<view class="submit-button">
				<view class="submit-block" @click="submit()">
					提交
				</view>
			</view>
		</view>
		
		<view v-if="tabIndex == 1">
			<view style="margin-top: 100rpx;" v-if="list.length < 1">
				<u-empty
					text="暂无数据"
					icon="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/005b6980c9514d1e8e4a0cee0de018e4.png">
				</u-empty>
			</view>
			<u-swipe-action>
				<u-swipe-action-item
					:disabled="true"
					:options="options"
					v-for="(item,index) in list" :key="item.id">
					<view class="swipe-action u-border-top u-border-bottom" @click="gotoPage('/subPackTask/work/cy/bx/detail?spType=用户&id='+item.id)">
						<view class="PhotographerBoxR" style="margin-left: 30rpx;">
							<view class="text-sm text-black" style="font-size: 32rpx;">
								<view>{{item.userName}}提交的报销</view>
								<view class="text-sm text-grey" style="position: absolute;right: 0;top:0;margin: 25rpx 50rpx 0 0;">
									{{item.tjDate}}
								</view>
							</view>
							<view class="text-sm text-grey margin-top-xs">报销金额：{{item.amount}}</view>
							<view class="text-sm text-grey margin-top-xs">报销类型：{{item.type}}</view>
							<view class="text-sm text-grey margin-top-xs" style="display: flex;margin-top: 30rpx;">
								<view>
									<u-avatar v-if="item.avatar" size="20" shape="square" :src="item.avatar"></u-avatar>
									<u-avatar
										v-else
										size="20"
										shape="square"
										:text="item.userName.slice(1)"
										:fontSize="item.userName.length > 2?8:12"
										bgColor="#0087FC">
									</u-avatar>
								</view>
								<span style="padding-left: 10rpx;color: #000;font-size: 28rpx;">由{{item.userName}}提交</span>
								<view style="position: absolute;right: 0;margin-right: 48rpx;">
									<text v-if="item.status == 0" style="color: #E6900D;font-weight: 26rpx;">{{item.spName+'处理中'}}</text>
									<text v-if="item.status == 1" style="color: #269B54;font-weight: 26rpx;">审批通过</text>
									<text v-if="item.status == 2" style="color: #D67D6F;font-weight: 26rpx;">审批拒绝</text>
									<text v-if="item.status == 3" style="color: #909399;font-weight: 26rpx;">已撤销</text>
								</view>
							</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
		
		<u-picker
			:immediateChange="true"
			:show="pickShow"
			:columns="columns"
			@confirm="confirmPick"
			keyName="name"
			@cancel="pickShow = false">
		</u-picker>
	</view>
</template>

<script>
	import { getDicts } from '@/api/dict.js'
	import { getList,add } from '@/api/expense.js'
	import { uploadFile,removeByOssId } from '@/api/upload'
	import flowPath from '@/components/flow-path-page/flow-path.vue'
	export default {
		components:{flowPath},
		data() {
			return {
				imageList:[],
				pickIndex:0,
				pickField:'',
				pickShow:false,
				columns:[],
				showLength:4,
				pageNum:1,
				list:[],
				tabIndex:0,
				tabList:[
					{
						name: '发起提交',
					}, 
					{
						name: '查看数据',
					}
				],
				amountAll:'',
				range: [],
				imageStyles:{
					width:64,
					height:64,
				},
				process: [
					{
						title: '审批人',
						desc: '请选择审批人',
						perList: [],
						perRequire: true
					}, 
					{
						title: '抄送人',
						desc: '请选择抄送人',
						perList: [],
						perRequire: false
					}, 
				],
				ruleForm:{
					expenseDetailList:[
						{
							amount:'',
							type:'',
							detailed:''
						}
					],
				},
				rules:{
					expenseDetailList:[],
					'expenseDetailList.0.amount': [
						{
							type: 'number',
							required: true,
							message: '请输入报销金额',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return value > 0 && value < 100000;
							},
							message: '报销金额为正数且不超过十万'
						},
					],
					'expenseDetailList.0.type': {
						type: 'string',
						required: true,
						message: '请选择报销类型',
						trigger: ['blur', 'change']
					},
					'expenseDetailList.0.detailed': {
						type: 'string',
						required: true,
						message: '请输入报销明细',
						trigger: ['blur', 'change']
					},
				},
				desc1: '请选择审批人',
				desc2: '请选择抄送人',
				userList: [],
				ccList: [],
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.ruleForm.setRules(this.rules)
		},
		onReachBottom(){
			if(this.tabIndex == 1){
				this.pageNum += 1
				this.getListData()
			}
		},
		onPullDownRefresh(){
			if(this.tabIndex == 1){
				this.pageNum = 1
				this.list = []
				this.getListData()
				uni.stopPullDownRefresh()
			}
		},
		onLoad() {
			this.getdictList()
		},
		methods: {
			submit(){
				this.$refs.ruleForm.validate().then(res => {
					if(this.userList.length<1){
						uni.$u.toast('请选择审批人')
						return
					}
					// 提交审核
					this.ruleForm.images = this.imageList.map(e=>e.url).join(',')
					this.ruleForm.spList = this.userList
					this.ruleForm.csList = this.ccList
					this.addExpense()
				}).catch(errors => {
					uni.$u.toast('请将信息填写完整')
				})
			},
			async addExpense(){
				const { data } = await add(this.ruleForm);
				if(data.code == 200){
					uni.showToast({ title: '提交成功', icon: 'none' })
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}else{
					uni.showToast({ title: data.msg, icon: 'none' })
				}
			},
			// 读取图片后事件
			afterRead(list,name) {
				list.file.forEach(e=>{
					this.uploadImage(e,name)
				})
			},
			async uploadImage(e,name){
				const result = await uploadFile(e.url)
				this[name].push(result)
			},
			// 删除图片后事件
			async deletePic(e,name) {
				let ossIds = []
				ossIds.push(this[name][e.index].ossId)
				const result = await removeByOssId(ossIds);
				this[name].splice(e.index, 1)
			},
			confirmPick(e){
				this.pickShow = false
				this.ruleForm.expenseDetailList[this.pickIndex][this.pickField] = e.value[0].name
			},
			closeUser(index,type) {
				if(this[type].length>this.showLength){
					this[type].splice(index+this[type].length-this.showLength,1)
				}else{
					this[type].splice(index,1)
				}
			},
			/* 流程组件测试 */
			/* setPers(e) {
				this.process.forEach(item=>{
					if (this.t == 'choose') {
						if(item.title == this.type){
							item.perList.forEach(its=> {
								e.forEach(eIts => {
									if (its.userId == eIts.userId) {
										let getLocation = e.indexOf(eIts);
										e.splice(getLocation, 1)
									}
								})
							})
							item.perList=item.perList.concat(e)
							if(item.perRequire==true){
								item.perList.length > 0 ? item.desc = item.perList.length+'人依次' + item.title.slice(0, item.title.length-1): item.desc = '请选择'+item.title 
							}else{
								item.perList.length > 0 ? item.desc = item.title.slice(0, item.title.length-1) + item.perList.length+'人' : item.desc = '请选择'+item.title
							}
						}
					} else if (this.t == 'add-more') {
						if(item.title == this.type){
							item.perList = e
							if(item.perRequire==true){
								item.perList.length > 0 ? item.desc = item.perList.length+'人依次' + item.title.slice(0, item.title.length-1): item.desc = '请选择'+item.title
							}else{
								item.perList.length > 0 ? item.desc = item.title.slice(0, item.title.length-1) + item.perList.length+'人' : item.desc = '请选择'+item.title
							}
						}
					}
				})
			},
			deletePers(index){
				this.process = index
			}, */
			setUsers(e) {
				this.userList = e
				// if (this.t == 'choose') {
				// 	this.userList.forEach(its => {
				// 		e.forEach(eIts => {
				// 			if (its.userId == eIts.userId) {
				// 				let getLocation = e.indexOf(eIts);
				// 				e.splice(getLocation, 1)
				// 			}
				// 		})
				// 	})
				// 	this.userList = this.userList.concat(e)
				// } else if (this.t == 'add-more') {
				// 	this.userList = e
				// }
			},
			setCc(e) {
				this.ccList = e
				// if (this.t == 'choose') {
				// 	this.ccList.forEach(its => {
				// 		e.forEach(eIts => {
				// 			if (its.userId == eIts.userId) {
				// 				let getLocation = e.indexOf(eIts);
				// 				e.splice(getLocation, 1)
				// 			}
				// 		})
				// 	})
				// 	this.ccList = this.ccList.concat(e)
				// } else if (this.t == 'add-more') {
				// 	this.ccList = e
				// }
				// this.desc2 = "抄送" + this.ccList.length + "人"
			},
			async getdictList(){
				const { data } = await getDicts('zxch_expense_type');
				if(data.code == 200){
					data.data.map(e=>{
						let obj = {
							id: e.dictValue,
							name: e.dictLabel
						}
						this.range.push(obj)
					})
					this.range = [this.range]
				}
			},
			async getListData(){
				let params = {
					pageNum:this.pageNum,
				}
				const { data } = await getList(params);
				if(data.code == 200 && data.rows.length > 0){
					this.list = [...this.list,...data.rows]
				}
			},
			tabClick(item) {
				this.tabIndex = item.index
				if(item.index == 1){
					this.pageNum = 1
					this.list = []
					this.getListData()
				}
			},
			getSum(){
				this.amountAll = this.ruleForm.expenseDetailList.map(e=>e.amount).reduce((a,b)=>parseInt(a)+parseInt(b))
			},
			delDetail(index){
				this.ruleForm.expenseDetailList.splice(index,1)
				this.amountAll = this.ruleForm.expenseDetailList.map(e=>e.amount).reduce((a,b)=>parseInt(a)+parseInt(b))
				Reflect.deleteProperty(this.rules,'expenseDetailList.'+index+".amount");
				Reflect.deleteProperty(this.rules,'expenseDetailList.'+index+".type");
				Reflect.deleteProperty(this.rules,'expenseDetailList.'+index+".detailed");
			},
			addDetail(){
				this.ruleForm.expenseDetailList.push(
					{
						amount:'',
						type:'',
						detailed:'',
					}
				)
				let index = this.ruleForm.expenseDetailList.length-1
				this.rules['expenseDetailList.'+index+'.amount'] = [
					{
						type: 'number',
						required: true,
						message: '请输入报销金额',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							return value > 0 && value < 100000;
						},
						message: '报销金额为正数且不超过十万'
					},
				]
				this.rules['expenseDetailList.'+index+'.type'] = {
					type: 'string',
					required: true,
					message: '请选择报销类型',
					trigger: ['blur', 'change']
				}
				this.rules['expenseDetailList.'+index+'.detailed'] = {
					type: 'string',
					required: true,
					message: '请输入报销明细',
					trigger: ['blur', 'change']
				}
				this.$refs.ruleForm.setRules(this.rules)
			},
		}
	}
</script>

<style>
	page{
		background-color: #f6f6f6;
		color: #333333;
	}
	
	.del-detail{
		color: #027fff;
		position: absolute;
		right: 0;
		top: 0;
		margin-top: 20rpx;
		margin-right: 30rpx;
	}
	
	.card-body-steps {
		display: inline-block;
	}
	
	.card-plus {
		display: inline-block;
		float: right;
		margin: 0 10rpx;
	}
	
	.plus-style {
		border: 1rpx solid #ededed;
		padding: 15rpx;
		margin: 0 10rpx 10rpx 0;
		position: relative;
		height: 40rpx;
		/* height: 15rpx; */
		border-radius: 15rpx;
	}
	
	.span-style {
		position: absolute;
		top: -5rpx;
		right: -5rpx;
		color: red;
		font-size: 50rpx;
		width: 20rpx;
		height: 20rpx;
		line-height: 35rpx;
		text-align: center;
	}
	
	.u-text__value {
		color: white !important;
	}
	
	
	.pers-list {
		display: flex;
		flex-direction: row;
		justify-content: right;
	}
	
	.per-list {
		margin-right: 50rpx;
	}
	
	/* .pers-pic {
		height: 65rpx;
	} */
	
	.card-plus-t {
		display: flex;
		/* flex-direction: row-reverse; */
		/* justify-content: right; */
		text-align: center;
	
	}
	
	.user-t {
		margin: 15rpx 0 10rpx 0;
	}
	
	.cc-t {
		margin: 10rpx 0 15rpx 0;
	}
	
	.image_bottom_text{
		margin-top: 5rpx;
	}
	
	.pers-name {
		color: #a5a5a5;
		font-size: 25rpx;
		/* width: 50rpx; */
	}
	
	.pers-close {
		background-color: rgb(198, 199, 203);
		width: 18rpx;
		height: 18rpx;
		border-radius: 18rpx;
		padding: 5rpx;
		position: absolute;
		margin-top: -80rpx;
		margin-left: 55rpx;
	}
	
	.pers-icon {
		position: relative;
		top: -80rpx;
		left: 88rpx;
		width: 26rpx;
	}
	
	.all-users {
		left: -10%;
		top: 5rpx;
		position: relative;
	}
	
	.per-all {
		margin-right: 22rpx;
	}
</style>
<style>
	.u-steps-item--column {
		margin: 30rpx 0 30rpx 10rpx;
		padding: 10rpx 0;
	}

	::v-deep .u-steps-item__line--column {
		height: 180rpx !important;
		background-color: #cdcdcd !important;
	}

	::v-deep .u-text__value--content {
		color: #131313;
		font-size: 33rpx !important;
	}

	::v-deep .u-steps-item__wrapper__dot {
		background-color: #cdcdcd !important;
	}
</style>